// ModalWithTable.tsx
import React from 'react';
import { Button, Modal, Table } from 'antd';
import { useState } from 'react';

function useModal() {
    const [visible, setVisible] = useState(false);

    const showModal = () => {
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const handleOperation = () => {
        // 关闭弹窗
        setVisible(false);
        // 显示提示信息
        alert('选择成功');
    };

    return { visible, showModal, handleCancel, handleOperation };
}

interface DataType {
    key: string;
    picture: string;
    name: string;
    manufacturer: string;
}

const ModalWithTable: React.FC = () => {
    const { visible, showModal, handleCancel, handleOperation } = useModal();

    const columns = [
        {
            title: '图片',
            dataIndex: 'picture',
            key: 'picture',
            render: (text: string) => <img src={text} alt="" style={{ width: 50, height: 50 }} />,
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '生产厂商',
            dataIndex: 'manufacturer',
            key: 'manufacturer',
        },
        {
            title: '操作',
            key: 'action',
            render: () => <Button type="link" onClick={handleOperation}>选择</Button>,
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            picture: 'https://via.placeholder.com/50', // 替换为实际图片地址
            name: '产品1',
            manufacturer: '厂商1',
        },
        {
            key: '2',
            picture: 'https://via.placeholder.com/50', // 替换为实际图片地址
            name: '产品2',
            manufacturer: '厂商2',
        },
        // 更多数据...
    ];

    return (
        <div>
            <Button type="primary" onClick={showModal}>
                点击查看
            </Button>
            <Modal
                title="产品列表"
                visible={visible}
                onCancel={handleCancel}
                footer={null} // 移除默认底部按钮
            >
                <Table columns={columns} dataSource={data} pagination={false} />
            </Modal>
        </div>
    );
};

export default ModalWithTable;